<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标测试页面</title>
    <link rel="stylesheet" href="/css/fontawesome-local.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .icon-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: #fafafa;
        }
        .icon-item i {
            font-size: 20px;
            color: #1a73e8;
            width: 30px;
            text-align: center;
        }
        .size-demo {
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background: #f0f8ff;
            border-radius: 10px;
        }
        .animation-demo {
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background: #f0fff0;
            border-radius: 10px;
        }
        .status {
            text-align: center;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
        }
        .status.online {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.offline {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-clipboard-check"></i> 本地FontAwesome图标测试</h1>
        
        <div id="status" class="status">
            <span id="statusText">检测中...</span>
        </div>
        
        <h2>常用图标展示</h2>
        <div class="icon-grid">
            <div class="icon-item">
                <i class="fas fa-clipboard-check"></i>
                <span>安全检查</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-tachometer-alt"></i>
                <span>仪表盘</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-search"></i>
                <span>搜索</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-university"></i>
                <span>学院</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-calendar-alt"></i>
                <span>日历</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-microscope"></i>
                <span>实验室</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-users"></i>
                <span>用户</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-user-cog"></i>
                <span>管理员</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-door-open"></i>
                <span>门窗</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-bolt"></i>
                <span>电路</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-fire-extinguisher"></i>
                <span>消防</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-boxes"></i>
                <span>物品</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-broom"></i>
                <span>清洁</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-exclamation-triangle"></i>
                <span>警告</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-check-circle"></i>
                <span>成功</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-times-circle"></i>
                <span>错误</span>
            </div>
        </div>
        
        <h2>图标大小演示</h2>
        <div class="size-demo">
            <i class="fas fa-star fa-xs"></i> xs
            <i class="fas fa-star fa-sm"></i> sm
            <i class="fas fa-star"></i> 默认
            <i class="fas fa-star fa-lg"></i> lg
            <i class="fas fa-star fa-xl"></i> xl
            <i class="fas fa-star fa-2x"></i> 2x
            <i class="fas fa-star fa-3x"></i> 3x
        </div>
        
        <h2>动画效果演示</h2>
        <div class="animation-demo">
            <i class="fas fa-sync fa-spin"></i> 旋转
            <i class="fas fa-heart fa-pulse"></i> 脉冲
            <i class="fas fa-cog fa-spin"></i> 设置
        </div>
        
        <h2>状态图标</h2>
        <div class="icon-grid">
            <div class="icon-item">
                <i class="fas fa-check" style="color: #28a745;"></i>
                <span>正常</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-times" style="color: #dc3545;"></i>
                <span>异常</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-exclamation" style="color: #ffc107;"></i>
                <span>警告</span>
            </div>
            <div class="icon-item">
                <i class="fas fa-info-circle" style="color: #17a2b8;"></i>
                <span>信息</span>
            </div>
        </div>
    </div>
    
    <script>
        // 检测网络状态
        function checkNetworkStatus() {
            const statusEl = document.getElementById('status');
            const statusTextEl = document.getElementById('statusText');
            
            if (navigator.onLine) {
                statusEl.className = 'status online';
                statusTextEl.textContent = '✅ 当前有网络连接 - 本地图标正常工作';
            } else {
                statusEl.className = 'status offline';
                statusTextEl.textContent = '🔴 当前无网络连接 - 本地图标正常工作（离线模式）';
            }
        }
        
        // 页面加载时检测
        checkNetworkStatus();
        
        // 监听网络状态变化
        window.addEventListener('online', checkNetworkStatus);
        window.addEventListener('offline', checkNetworkStatus);
        
        // 每5秒检测一次
        setInterval(checkNetworkStatus, 5000);
    </script>
</body>
</html> 